<template>
  <div class="me-received">
    <div class="nav">
      <div class="nav-item" @click.stop.prevent="switchTab(1)">收到的评论</div>
      <div class="nav-item" @click.stop.prevent="switchTab(2)">收到的加油</div>
      <div class="subscipt" :class="{'active' : navSwitch === 2}"></div>
    </div>
    <div class="content">
      <!-- 评论 -->
      <div class="control" v-if="navSwitch === 1">
        <div class="default" v-if="!receiveList.length && !loadingFlag">
          <img :src=" navSwitch === 1 ? 'https://mobuz-mp.cdn.bcebos.com/matter/personalReceivedCommentDefault.png': 'https://mobuz-mp.cdn.bcebos.com/matter/personalReceivedPraiseDefault.png'" alt="">
        </div>
        <div class="row" v-for="item in receiveList" :key="item" @click="gotoJobDatetil(item)">
          <!-- 头像 -->
          <div class="head">
            <img :src="navSwitch === 1 ? item.to_icon : item.avatarUrl" alt="">
          </div>
          <div class="details">
            <!-- 评论人 -->
            <!-- <div class="judge">{{ navSwitch === 1 ? item.from_name : item.nickName}}{{ navSwitch === 1 ? '对你的作业进行了评论' : '为你加油' }}</div> -->
            <div class="judge">{{item.title}}</div>

            <!-- 描述 -->
            <div class="desc">{{ navSwitch === 1 ?item.back_comment : item.section_name }}</div>
            <!--  -->
            <div class="shortcut">
              <!-- 时间 -->
              <div class="time">{{item.time}}</div>
              <!-- 回复 -->
              <!-- <div class="reply" v-if="navSwitch === 1">回复</div> -->
              <!-- 前往作业 -->
              <div class="goto-job">前往作业{{navSwitch === 1 ? '回复' : ''}}</div>
            </div>
          </div>
          
        </div> 
      </div>
      <!-- 评论 -->
      <div class="control" v-if="navSwitch === 2">
        <div class="default" v-if="!receiveList.length && !loadingFlag">
          <img :src=" navSwitch === 1 ? 'https://mobuz-mp.cdn.bcebos.com/matter/personalReceivedCommentDefault.png': 'https://mobuz-mp.cdn.bcebos.com/matter/personalReceivedPraiseDefault.png'" alt="">
        </div>
        <div class="row" v-for="item in receiveList" :key="item" @click="gotoJobDatetil(item)">
          <!-- 头像 -->
          <div class="head">
            <img :src="navSwitch === 1 ? item.to_icon : item.avatarUrl" alt="">
          </div>
          <div class="details">
            <!-- 评论人 -->
            <!-- <div class="judge">{{ navSwitch === 1 ? item.from_name : item.nickName}}{{ navSwitch === 1 ? '对你的作业进行了评论' : '为你加油' }}</div> -->
            <div class="judge">{{item.title}}</div>

            <!-- 描述 -->
            <div class="desc">{{ navSwitch === 1 ?item.back_comment : item.section_name }}</div>
            <!--  -->
            <div class="shortcut">
              <!-- 时间 -->
              <div class="time">{{item.time}}</div>
              <!-- 回复 -->
              <!-- <div class="reply" v-if="navSwitch === 1">回复</div> -->
              <!-- 前往作业 -->
              <div class="goto-job">前往作业{{navSwitch === 1 ? '回复' : ''}}</div>
            </div>
          </div>
          
        </div> 
      </div>
      <!-- 赞 -->
      <!-- <div class="praise" v-if="navSwitch === 2"></div> -->
    </div>
    <div v-if="!loadingFlag&& receiveList.length >= 10" class="commentLoading">没有更多了</div>
  </div>
</template>

<script>
import {obtainReceiveComment,obtainReceivePraise,preserveUserinfo} from '@/config/api'
import {showMessager} from "@/config/wUtils"
import {dateRegExp ,commentRegExp} from "@/config/mUtils"
// import store from './store' 
import {removeTabarbadge} from '@/config/vuexUtils'
import {NEWMODULEBATCHID} from '@/config/env'
export default {
  data () {
    return {
      // 导航栏切换
      navSwitch: 0,
      // 数据列表
      receiveList: [],
      // 当前页码
      currnetPage: 1,
      // 是否允许加载 默认允许
      loadingFlag: true,
      // 学员ID
      student_id: '',
      // 是否下拉
      pulldown: false
    }
  },
  filters:{
    formatDate (time) {
      return dateRegExp(time,'yyyy')
    }
  },
  async mounted () {
    // 关闭转发
    wx.hideShareMenu();
    let wx_vipcn = wx.getStorageSync('wx_vipcn');
    if (wx_vipcn) {
      // 公众号模板进入的
      this.student_id = wx.getStorageSync('wx_vipcn_student_id');
      this.batch_id = wx.getStorageSync('wx_vipcn_batch_id');
      // 本地用户信息
      let userInfo = wx.getStorageSync("userInfo");
      if (userInfo && userInfo['openId'] && userInfo['unionId']) {
        // 保存用户最近登录的信息
        await preserveUserinfo(userInfo['openId'],this.batch_id, this.student_id,userInfo['unionId'])
      }
       // 默认显示“我收到的评论”
      this.switchTab(wx_vipcn - 0);
    } else {
      // 个人中心界面进入
      this.student_id = wx.getStorageSync('student_id');
      // 默认显示“我收到的评论”
      this.switchTab(1);
    }
    
  },
  methods: {
    switchTab (num) {
      if (num === this.navSwitch) return false;
      this.navSwitch = num;
      this.receiveList = [];
      this.currnetPage = 1;
      this.loadingFlag = true;
      this.pulldown = true;
      if (this.navSwitch === 1) {
        this.receiveComment();
        removeTabarbadge({
          type: 'comment',
          student_id: this.student_id
        })
      } else {
        this.receivePraise();
        removeTabarbadge({
          type: 'praise',
          student_id: this.student_id
        })
      }
    },
    // 我收到的评论
    async receiveComment () {
      try {
        let data = await obtainReceiveComment(this.student_id,this.currnetPage);
        // data.data.forEach(item => {
        //   return item['time'] = commentRegExp(item.back_date-0 ,'yyyy-MM-dd')
        // });
        for (let i = 0; i < data.data.length; i++) {
          // 时间格式化
          data.data[i]['time'] = commentRegExp(data.data[i].back_date-0,'yyyy-MM-dd');
          if (this.navSwitch === 1) {
            if (data.data[i]['status']) {
              if (data.data[i]['to_uid'] == this.student_id && data.data[i]['from_id'] !=  this.student_id) {
                data.data[i]['title'] = '你对' + data.data[i]['from_name'] + '进行了回复'
              } else {
                data.data[i]['title'] = data.data[i]['from_name'] + '对你的作业进行了评论'
              }
            } else {
              data.data[i]['title'] = data.data[i]['to_name'] + '回复了你的评论'
            }
          } else {
            data.data[i]['title'] = data.data[i]['nickName'] + '为你加油'
          }
        }
        this.currnetPage++;
        this.receiveList = [...this.receiveList,...data.data];
        this.loadingFlag = data.data.length ? true : false;
      } catch (e) {
        showMessager('网络拥堵,请稍后再试')
      };
      wx.hideLoading();
      wx.stopPullDownRefresh();
    },
    // 我收到的赞
    async receivePraise () {
      try {
        let data = await obtainReceivePraise(this.student_id,this.currnetPage);
        // data.data.forEach(item => {
        //   return item['time'] = commentRegExp(item.create_time-0,'yyyy-MM-dd')
        // });
        for (let i = 0; i < data.data.length; i++) {
          data.data[i]['title'] = data.data[i]['nickName'] + '为你加油';
           data.data[i]['time'] = commentRegExp( data.data[i]['create_time']-0,'yyyy-MM-dd')
        }
        this.currnetPage++;
        this.receiveList = [...this.receiveList,...data.data];
        this.loadingFlag = data.data.length ? true : false;
      } catch (e) {
        console.log(e)
        showMessager('网络拥堵,请稍后再试')
      };
      wx.hideLoading();
      wx.stopPullDownRefresh();
    },
    gotoJobDatetil (item) {
      // wx.navigateTo({
      //   url: '../taskCircumstance/main?job_id='+item.job_id+'&status=2'
      // })  
      // if (this.batch_id <= NEWMODULEBATCHID) {
      //     wx.navigateTo({
      //         url: '../courseParticulars/main?section_id='+item.section_id+'&batch_id='+this.batch_id
      //     })
      // } else {
      //     wx.navigateTo({
      //         url: '../courseCircumstance/main?section_id='+item.section_id+'&batch_id='+this.batch_id
      //     })
      // }
      // let batch_id =  wx.getStorageSync('batch_id')
      // if (batch_id <= NEWMODULEBATCHID) {
      //     wx.navigateTo({
      //     url: '../taskParticulars/main?task_state=1&job_id='+item.job_id
      //   })
      // } else {
        wx.navigateTo({
          url: '../taskCircumstance/main?job_id='+item.job_id+'&status=2'
        })  
      // }
    }
  },
  // 下拉刷新
  onPullDownRefresh () {
    console.log('下拉加载')
    if (!this.loadingFlag)  {
      wx.stopPullDownRefresh();
      return false;
    };
    this.pulldown = false;
    this.currnetPage = 1;
    this.switchTab(this.navSwitch);
  },
  // 上拉加载
  onReachBottom () {
    console.log('上拉加载');
    if (!this.loadingFlag)  {
      return false;
    };
    wx.showLoading({title: '加载中'});
    if (this.navSwitch === 1) {
      this.receiveComment();
    } else {
      this.receivePraise();
    }
  },
  // 页面显示
  onShow () {
  } 
}
</script>

<style lang="less" scoped>
.me-received {  
  position: relative;
  .nav {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    font-size: 0;
    padding: 17rpx 0 7rpx;
    background-color: #fff;
    z-index: 999;
    .nav-item {
      width: 50%;
      display: inline-block;
      font-family: PingFangSC-Regular;
      font-size: 28rpx;
      color: #333333;
      letter-spacing: 0.7rpx;
      text-align: center;
    }
    .subscipt {
      width: 50%;
      position: absolute;
      bottom: 0;
      height: 2px;
      transition: all 0.3s;
      &.active {
        transform: translate(100% ,0)
      }
      &::before {
        display: block;
        content: '';
        margin: 0 auto;
        width: 50rpx;
        height: 2px;
        background-color: #EE3A29;
        border-radius: 3rpx;
      }
    }
  }

  .content {
    padding: 82rpx 24rpx 0;
    .control {
      .default {
        img {
          display: block;
          margin: 74rpx auto 0;
          width: 430rpx;
          height: 354rpx;
        }
      }
      .scoreGrabble {
         width: 100%;
         height: auto;
         img {
           display: block;
           vertical-align:top;
           width: 100%;
           height: auto;;
         }
      }
      .row {
        position: relative;
        cursor: pointer;
        padding: 20rpx 0;
        border-bottom: 1px solid #EAEAEA;
        .head {
          position: absolute;
          top: 20rpx;
          left: 0;
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
          overflow: hidden;
          img {
            display: block;
            vertical-align: top;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            overflow: hidden;
          }
        }
        .details {
          padding-left: 115rpx;
          > div {
            line-height: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .judge {
            font-family: PingFangSC-Regular;
            font-size: 28rpx;
            color: #999999;
            letter-spacing: 0.6rpx;
          }
          .desc {
            padding: 11rpx 0;
            font-family: PingFangSC-Regular;
            font-size: 32rpx;
            color: #333333;
            letter-spacing: 0.69rpx;
          }
          .shortcut {
            font-size: 0;
            > div {
              line-height: 1;
              display: inline-block;
              font-family: PingFangSC-Regular;
              font-size: 22rpx;
              color: #999999;
              letter-spacing: 0.44rpx;
              & + div {
                margin-left: 20rpx;
              }
            }
          }
        }
      }
    }
  } 
  .commentLoading {
    width:100%;
    text-align:center;
    font-family:PingFangSC-Regular;
    font-size:26rpx;
    color:#999999;
    letter-spacing:0.7rpx;
    line-height:1;
    margin-top:-1rpx;
    padding-bottom:30rpx;
    padding-top:13rpx;
    background-color:#fff;
  }
}
</style>
